<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }">
            <el-tabs v-model="activeKey" @tab-click="handleClick">
                <el-tab-pane label="客服配置" name="customer"> </el-tab-pane>
                <el-tab-pane label="账户配置" name="account"></el-tab-pane>
            </el-tabs>
            <div v-if="showPage">
                <div class="form-wrap" v-if="activeKey == 'customer'">
                    <el-form size="small" label-width="160px" ref="customerForm" :model="customerForm">
                        <el-form-item label="客服电话">
                            <el-input prop="phone" placeholder="请输入客服电话" class="form-input" v-model="customerForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="客服二维码">
                            <upload-single-img :imgUrl="customerForm.wx_code" @removeImg="removeImg" @handleSuccess="handleSuccess"
                                               ref="upload"></upload-single-img>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="onSubmit(customerForm)" :disabled="isDisabled" :loading="isLoading">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="form-wrap" v-if="activeKey == 'account'">
                    <el-form size="small" :rules="accountFormRules" label-width="160px" ref="accountForm" :model="accountForm">
                        <el-form-item label="是否工行" prop="is_icbc">
                            <el-switch v-model="accountForm.is_icbc" :active-value="1" :inactive-value="2"></el-switch>
                        </el-form-item>
                        <el-form-item label="卡类型" prop="card_type">
                            <el-radio v-model="accountForm.card_type" label="1">企业</el-radio>
                            <el-radio v-model="accountForm.card_type" label="2">个体</el-radio>
                        </el-form-item>
                        <el-form-item label="省份" prop="province">
                            <el-input placeholder="请输入省份" class="form-input" v-model="accountForm.province"></el-input>
                        </el-form-item>
                        <el-form-item label="地市" prop="city">
                            <el-input prop="city" placeholder="请输入地市" class="form-input" v-model="accountForm.city"></el-input>
                        </el-form-item>
                        <el-form-item label="开户名称" prop="accoun_name">
                            <el-input placeholder="请输入开户名称" class="form-input" v-model="accountForm.accoun_name"></el-input>
                        </el-form-item>
                        <el-form-item label="对公账号" prop="account_no">
                            <el-input placeholder="请输入对公账号" class="form-input" v-model="accountForm.account_no"></el-input>
                        </el-form-item>
                        <el-form-item label="开户行" prop="bank_name">
                            <el-input placeholder="请输入开户行" class="form-input" v-model="accountForm.bank_name"></el-input>
                        </el-form-item>
                        <el-form-item label="联系手机" prop="bank_mobile">
                            <el-input placeholder="请输入联系手机" class="form-input" v-model="accountForm.bank_mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="税号" prop="tax_num">
                            <el-input placeholder="请输入税号" class="form-input" v-model="accountForm.tax_num"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="onSubmit(accountForm)" :disabled="isDisabled" :loading="isLoading">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import uploadSingleImg from "@/components/uploadSingleImg.vue";
import uploadMultipleImage from "@/components/uploadMultipleImage.vue";
import {
    systemSetting,
    saveSettingForm,
} from "@/api/setting.js";
import UploadSingleImg from "../../components/uploadSingleImg.vue";
import UploadMultipleImage from '../../components/uploadMultipleImage.vue';
import myEditor from "@/components/myEditor.vue";
export default {
    components: {
        uploadSingleImg,
        uploadMultipleImage,
        myEditor
    },
    data() {
        return {
            showPage: false,
            activeKey: "customer",
            isDisabled: false,
            isLoading: false,
            dialogVisible: false,
            customerForm: {
                keys: "",
                phone: '',
                wx_code: '',
            },
            accountForm: {
                keys: "",
                accoun_name: "",
                account_no: '',
                bank_name: '',
                bank_mobile: '',
                tax_num: '',
                is_icbc: '',
                card_type: '',
                province: '',
                city: ''
            },
            accountFormRules: {
                is_icbc: [
                    {
                        required: true,
                        message: "请选择是否工行",
                        trigger: "change",
                    },
                ],
                card_type: [
                    {
                        required: true,
                        message: "请选择卡类型",
                        trigger: "change",
                    },
                ],
                province: [
                    {
                        required: true,
                        message: "请输入省份",
                        trigger: "blur",
                    },
                ],
                city: [
                    {
                        required: true,
                        message: "请输入地市",
                        trigger: "blur",
                    },
                ],
                accoun_name: [
                    {
                        required: true,
                        message: "请输入开户名称",
                        trigger: "blur",
                    },
                ],
                account_no: [
                    {
                        required: true,
                        message: "请输入对公账号",
                        trigger: "blur",
                    },
                ],
                bank_name: [
                    {
                        required: true,
                        message: "请输入开户行",
                        trigger: "blur",
                    },
                ],

                bank_mobile: [
                    {
                        required: true,
                        message: "请输入联系手机",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                tax_num: [
                    {
                        required: true,
                        message: "请输入税号",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getSystemInfo();
    },
    methods: {
        handleClick(tab) {
            this.activeKey = tab.name;
            this.getSystemInfo();
        },
        //获取配置信息
        getSystemInfo() {
            let activeKey = this.activeKey;
            systemSetting({
                keys: activeKey,
            }).then((res) => {
                this.showPage = true;
                if (res.code == 0) {
                    switch (activeKey) {
                        case "customer":
                            this.customerForm = res.data.values;
                            break;
                        case "account":
                            this.accountForm = res.data.values;
                            break;
                    }
                }
            });
        },
        onSubmit(formName) {
            this.isDisabled = true;
            this.isLoading = true;
            formName.keys = this.activeKey;
            if (formName.keys == 'account') {
                this.$refs.accountForm.validate((valid) => {
                    if (valid) {
                        saveSettingForm(formName).then((res) => {
                            if (res.code == 0) {
                                this.isDisabled = false;
                                this.isLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                            } else {
                                this.isDisabled = false;
                                this.isLoading = false;
                            }
                        });
                    } else {
                        this.isDisabled = false;
                        this.isLoading = false;
                        return false;
                    }
                });
            } else {
                saveSettingForm(formName).then((res) => {
                    if (res.code == 0) {
                        this.isDisabled = false;
                        this.isLoading = false;
                        this.$message({
                            message: res.msg,
                            type: "success",
                        });
                    } else {
                        this.isDisabled = false;
                        this.isLoading = false;
                    }
                });
            }

        },
        handleSuccess(e) {
            this.customerForm.wx_code = e;
        },
        removeImg() {
            this.customerForm.wx_code = '';
        },
    },
};
</script>

<style scoped>
/deep/ .el-input-group__append {
    background: transparent;
    border: 0;
    padding: 0 10px;
}
.form-wrap {
    margin-top: 10px;
    min-height: 560px;
}
.delivery-input {
    width: 300px;
}
</style>